<script setup>
import * as echarts from 'echarts'
import {onMounted, ref} from "vue";
import {reqGetPriorityQuestion} from "@/api/mistake";
import {Message} from "element-ui";

let radarChart = {}
const options = {
  title: {
    text: '优先级雷达图'
  },
  radar: {
    indicator: [
      {name: '重点'},
      {name: '高'},
      {name: '中'},
      {name: '低'},
      {name: '冷门'},
    ]
  },
  series: [
    {
      name: '优先级雷达图',
      type: 'radar',
      label: {
        show: true
      },
      data: [
        {
          value: [],
          name: '优先级'
        },
      ]
    }
  ]
}
const data = ref([])

const getData = async () => {
  const res = await reqGetPriorityQuestion()
  if (res.code === 1) {
    data.value = res.data.map(item => {
      return item.count
    })
    options.series[0].data[0].value = data.value
    radarChart.setOption(options)
  } else {
    Message.error(res.msg)
  }
}

const initChart = () => {
  radarChart = echarts.init(document.getElementById('radar-chart'))
  radarChart.setOption(options)
}

onMounted(() => {
  initChart()
  getData()
})
</script>

<template>
  <div>
    <div id="radar-chart" style="width: 100%; height: 350px;"></div>
  </div>
</template>

<style scoped>

</style>